import React from 'react';
import ReactDOM from 'react-dom';

/*  什么是JSX
是一种JS和HTML混合的语法,将组件的结构、数据甚至样式都聚合在一起定义组件
jsx 就是js+xml(html) 是一种js的扩展
jsx其实是一种语法糖，最终运行的时候会经过babel的转义
React.createElement("h1",null,"hello")

↑会得到一个叫做React元素的东东
React元素是构成React应用的最小单位
React元素用来描述你在屏幕上看到的内容

ReactDOM.render可以保证浏览器界面的显示和React元素保持一致
*/
/*
const ele = <h1>Hello</h1>; // {type:'h1',props:{children:'Hello'}}
// const ele = React.createElement("h1", null, "Hello");

ReactDOM.render(
  ele,
  document.getElementById('root')
);
*/



const message: string = 'hello';

// const style = {color: 'red', fontSize: 20};
const style:React.CSSProperties = {color: 'red', fontSize: 20 /*,xx:10*/};

ReactDOM.render(
  <div className="title" style={style}>{message}</div>
  , document.getElementById('root'));
